import * as React from 'react'
import { Card, Typography, Progress, Col, Row, Tabs, TabPane, Button, RadioGroup, Radio, Badge } from "@douyinfe/semi-ui";
import { ReactFlvPlayer } from 'react-flv-player'

export default function ScreenSider() {
    return (
        <>
            <Card
                shadows='always'
                style={{ background: 'rgba(var(--semi-light-blue-2), 1)' }} >
                <div>
                    <span style={{ float: 'left', fontWeight: 'bold', marginRight: '3px' }}>GMV </span>
                    {/* <IconHelpCircle size={16} style={{ verticalAlign: 'middle' }} /> */}
                </div>
                <div style={{ textAlign: 'left' }}>
                    <Typography.Title>50,832.00</Typography.Title>
                </div>
                <Row>
                    <Col span={6}>完成目标:</Col>
                    <Col span={18}><Progress
                        percent={10} showInfo
                        strokeGradient={true}
                        stroke="var(--semi-color-warning)"
                        style={{ marginTop: '8px', marginLeft: '8px' }} /></Col>
                </Row>
            </Card>

            <Card
                shadows='always'
                style={{ marginTop: '10px' }}>
                <Tabs
                    defaultActiveKey="1"
                    tabBarExtraContent={
                        <Button
                            size="small"
                            onClick={() => {
                                alert('you have clicked me!');
                            }}
                        >
                            剪辑
                        </Button>
                    }
                >
                    <TabPane tab="视频" itemKey="1">
                        <div style={{ borderRadius: '5px', overflow: 'hidden', marginTop: '10px', position: 'relative' }}>
                            {/* <ReactFlvPlayer
                                url={'https://pull-flv-l6.douyincdn.com/third/stream-114897780035551271_or4.flv?k=84cdad1548ec7fd6&t=1712717320'}
                                width="300px"
                                isMuted={false}
                            /> */}
                            <Badge
                                style={{ position: 'absolute', top: '-500px', left: '230px', zIndex: 1000 }}
                                count={999}
                                theme="inverted"
                                overflowCount={100}
                                type='success' />

                        </div>
                        <div className="comment-list">
                            <div className="comment-item flex">
                                <div title="尼***" className="ellipsis-1 name">尼***:</div>
                                <div title="金针确实不错，上次买龙珠你们有送" className="audience-content flex-1 ellipsis-2">好的</div>
                                <div className="comment-time" style={{ minWidth: '50px' }}>23:51</div>
                            </div>

                            <div className="comment-item flex">
                                <div title="尼***" className="ellipsis-1 name">尼***:</div>
                                <div title="金针确实不错，上次买龙珠你们有送" className="audience-content flex-1 ellipsis-2">金针确实不错，上次买龙珠你们有送</div>
                                <div className="comment-time" style={{ minWidth: '50px' }}>23:51</div>
                            </div>

                            <div className="comment-item flex">
                                <div title="尼***" className="ellipsis-1 name">尼***:</div>
                                <div title="金针确实不错，上次买龙珠你们有送" className="audience-content flex-1 ellipsis-2">金针确实不错，上次买龙珠你们有送</div>
                                <div className="comment-time" style={{ minWidth: '50px' }}>23:51</div>
                            </div>

                            <div className="comment-item flex">
                                <div title="尼***" className="ellipsis-1 name">尼***:</div>
                                <div title="金针确实不错，上次买龙珠你们有送" className="audience-content flex-1 ellipsis-2">金针确实不错，上次买龙珠你们有送</div>
                                <div className="comment-time" style={{ minWidth: '50px' }}>23:51</div>
                            </div>

                            <div className="comment-item flex">
                                <div title="尼***" className="ellipsis-1 name">尼***:</div>
                                <div title="金针确实不错，上次买龙珠你们有送" className="audience-content flex-1 ellipsis-2">金针确实不错，上次买龙珠你们有送</div>
                                <div className="comment-time" style={{ minWidth: '50px' }}>23:51</div>
                            </div>

                            <div className="comment-item flex">
                                <div title="尼***" className="ellipsis-1 name">尼***:</div>
                                <div title="金针确实不错，上次买龙珠你们有送" className="audience-content flex-1 ellipsis-2">金针确实不错，上次买龙珠你们有送</div>
                                <div className="comment-time" style={{ minWidth: '50px' }}>23:51</div>
                            </div>

                            <div className="comment-item flex">
                                <div title="尼***" className="ellipsis-1 name">尼***:</div>
                                <div title="金针确实不错，上次买龙珠你们有送" className="audience-content flex-1 ellipsis-2">金针确实不错，上次买龙珠你们有送</div>
                                <div className="comment-time" style={{ minWidth: '50px' }}>23:51</div>
                            </div>

                            <div className="comment-item flex">
                                <div title="尼***" className="ellipsis-1 name">尼***:</div>
                                <div title="金针确实不错，上次买龙珠你们有送" className="audience-content flex-1 ellipsis-2">金针确实不错，上次买龙珠你们有送</div>
                                <div className="comment-time" style={{ minWidth: '50px' }}>23:51</div>
                            </div>

                            <div className="comment-item flex">
                                <div title="尼***" className="ellipsis-1 name">尼***:</div>
                                <div title="金针确实不错，上次买龙珠你们有送" className="audience-content flex-1 ellipsis-2">金针确实不错，上次买龙珠你们有送</div>
                                <div className="comment-time" style={{ minWidth: '50px' }}>23:51</div>
                            </div>

                            <div className="comment-item flex">
                                <div title="尼***" className="ellipsis-1 name">尼***:</div>
                                <div title="金针确实不错，上次买龙珠你们有送" className="audience-content flex-1 ellipsis-2">金针确实不错，上次买龙珠你们有送</div>
                                <div className="comment-time" style={{ minWidth: '50px' }}>23:51</div>
                            </div>


                            <div className="comment-item flex">
                                <div title="尼***" className="ellipsis-1 name">尼***:</div>
                                <div title="金针确实不错，上次买龙珠你们有送" className="audience-content flex-1 ellipsis-2">金针确实不错，上次买龙珠你们有送</div>
                                <div className="comment-time" style={{ minWidth: '50px' }}>23:51</div>
                            </div>
                        </div>
                    </TabPane>
                    <TabPane tab="评论" itemKey="2">
                        <RadioGroup type='button' buttonSize='small' defaultValue={1} style={{ width: '100%', textAlign: 'center' }} aria-label="单选组合示例" name="demo-radio-small">
                            <Radio value={1}>全部评论</Radio>
                            <Radio value={2}>关键评论</Radio>
                            <Radio value={3}>高频评论</Radio>
                        </RadioGroup>
                        <div className="comment-list" style={{ minHeight: '1000px' }}>
                            <div className="comment-item flex">
                                <div title="尼***" className="ellipsis-1 name">尼***:</div>
                                <div title="金针确实不错，上次买龙珠你们有送" className="audience-content flex-1 ellipsis-2">好的</div>
                                <div className="comment-time" style={{ minWidth: '50px' }}>23:51</div>
                            </div>

                            <div className="comment-item flex">
                                <div title="尼***" className="ellipsis-1 name">尼***:</div>
                                <div title="金针确实不错，上次买龙珠你们有送" className="audience-content flex-1 ellipsis-2">1</div>
                                <div className="comment-time" style={{ minWidth: '50px' }}>23:51</div>
                            </div>

                            <div className="comment-item flex">
                                <div title="尼***" className="ellipsis-1 name">尼***:</div>
                                <div title="金针确实不错，上次买龙珠你们有送" className="audience-content flex-1 ellipsis-2">有套餐内容吗?</div>
                                <div className="comment-time" style={{ minWidth: '50px' }}>23:51</div>
                            </div>
                        </div>
                    </TabPane>
                    <TabPane tab="高光片段" itemKey="3">
                        帮助
                    </TabPane>
                </Tabs>
            </Card>
        </>
    )
}